<template>
  <AxiomDialog
    :model-value="visible"
    title="保存查询预设"
    width="400px"
    @update:model-value="$emit('update:visible', $event)"
    @confirm="handleConfirm"
    @cancel="$emit('update:visible', false)"
  >
    <AxiomForm ref="formRef" :model="formState" :rules="rules" label-position="top">
      <AxiomFormItem label="预设名称" prop="name">
        <AxiomInput v-model="formState.name" placeholder="请输入预设的名称" />
      </AxiomFormItem>
    </AxiomForm>
  </AxiomDialog>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { 
  AxiomDialog, 
  AxiomForm, 
  AxiomFormItem, 
  AxiomInput 
} from 'axiom-view';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['update:visible', 'confirm']);

const formRef = ref(null);
const formState = reactive({
  name: '',
});

const rules = {
  name: [{ required: true, message: '预设名称不能为空', trigger: 'blur' }],
};

async function handleConfirm() {
  if (!formRef.value) return;
  try {
    await formRef.value.validate();
    emit('confirm', formState.name);
    emit('update:visible', false);
    formState.name = ''; // Reset after confirm
  } catch (error) {
    // Validation failed
    console.warn('Form validation failed:', error);
  }
}
</script> 